﻿<%@ Page Title="协议分析" Language="C#" MasterPageFile="~/AnalysisMaster.Master" AutoEventWireup="true" CodeBehind="ProtocolAnalysis.aspx.cs" Inherits="NetFlow.ProtocolAnalysis" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div class="container-fluid">
        <h2 class="text-center mt-4">协议分布分析</h2>

        <!-- 数据表格 -->
        <div class="card mt-3">
            <%--<div class="card-header text-center">协议通信数据表</div>--%>
            <div class="card-body">
                <!-- GridView 用于显示协议数据 -->
                <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-bordered" AutoGenerateColumns="true"></asp:GridView>
            </div>
        </div>

        <div class="row mt-4">
            <!-- 区域 1: 协议分布（柱状图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">协议分布统计</div>
                    <div class="card-body">
                        <canvas id="protocolDistributionBarChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <!-- 区域 3: 协议占比（饼图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">协议使用占比</div>
                    <div class="card-body">
                        <canvas id="protocolPieChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- 区域 4: 协议流量消耗（雷达图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">协议流量消耗</div>
                    <div class="card-body">
                        <canvas id="protocolRadarChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof netFlowData !== 'undefined') {
                // 协议分布（柱状图）
                var ctx1 = document.getElementById('protocolDistributionBarChart').getContext('2d');
                var protocolAggregated = aggregateData(netFlowData, 'Protocol', 'Protocol', x => 1);
                var protocolLabels = Object.keys(protocolAggregated);
                var protocolValues = Object.values(protocolAggregated);

                new Chart(ctx1, {
                    type: 'bar',
                    data: {
                        labels: protocolLabels,
                        datasets: [{
                            label: '协议使用数量',
                            data: protocolValues,
                            backgroundColor: 'rgba(54, 162, 235, 0.6)'
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 协议使用占比（饼图）
                var ctx3 = document.getElementById('protocolPieChart').getContext('2d');
                var protocolAggregated = aggregateData(netFlowData, 'Protocol', 'Protocol', x => 1);
                var protocolLabels = Object.keys(protocolAggregated);
                var protocolValues = Object.values(protocolAggregated);

                new Chart(ctx3, {
                    type: 'pie',
                    data: {
                        labels: protocolLabels,
                        datasets: [{
                            data: protocolValues,
                            backgroundColor: ['#FF5733', '#33FF57', '#3357FF', '#FFD700']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 协议流量消耗（雷达图）
                var ctx4 = document.getElementById('protocolRadarChart').getContext('2d');
                var protocolAggregated = aggregateData(netFlowData, 'Protocol', 'Protocol', x => 1);
                var protocolLabels = Object.keys(protocolAggregated);
                var protocolValues = Object.values(protocolAggregated);

                new Chart(ctx4, {
                    type: 'radar',
                    data: {
                        labels: protocolLabels,
                        datasets: [{
                            label: '协议使用数量',
                            data: protocolValues,
                            backgroundColor: 'rgba(75, 192, 192, 0.4)',
                            borderColor: 'green'
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });
            } else {
                console.error("No data available.");
            }
        });

        function aggregateData(data, keyField, valueField, aggregator) {
            return data.reduce((acc, item) => {
                const key = item[keyField];
                if (!acc[key]) {
                    acc[key] = 0;
                }
                acc[key] += aggregator(item[valueField]);
                return acc;
            }, {});
        }
    </script>
</asp:Content>